<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12" id="creditTypeList">
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'table', 'echarts', "slider"], function(){
        var $ = layui.$, table = layui.table,
            echarts = layui.echarts, admin = layui.admin,
            view = layui.view, form = layui.form, slider = layui.slider;
        var tableId = 0;
        var tableIdMap = [];    // 记录credit type与tableid的映射
        var courseMap = []; // credit type与course列表的映射
        var creditTypeMap = [];
        var creditTypeList;
        var emptyCourse = [
            {
            "courseName": "空",
            "credit": "0",
            "courseType": "空",
            "score": "0",
            "semester": "空"
        }
        ];
        var load = layer.load(2);
        $.ajax({
            url: "/jw/stu/requiredcredit",
            dataType: "JSON",
            complete: function (result) {
                layer.close(load);
                result = result.responseJSON;
                if (result['status'] !== 200) {
                    layer.msg(result["message"]);
                    return
                }
                creditTypeList = result["data"];
                for (var i = 0; i < creditTypeList.length; i++) {
                    var typeName = creditTypeList[i]["type"];
                    var tableIdValue = "credit-" + tableId++;
                    tableIdMap[typeName] = tableIdValue;
                    courseMap[typeName] = [];
                    creditTypeMap[typeName] = creditTypeList[i];
                    var html = "<div class=\"layui-card\">" +
                        "<div class=\"layui-card-header\">" + typeName + "</div>" +
                        "<div class=\"layui-card-body\">" +
                        "<table class=\"layui-hide\" id=\""+ tableIdValue  + "\" lay-filter=\"test\"></table>" +
                        "</div>" +
                        "</div>";
                    $('#creditTypeList').append(html);
                }
                load = layer.load(2);
                $.ajax({
                    url: "/jw/stu/score",
                    dataType: "JSON",
                    complete: function (result) {
                        layer.close(load);
                        result = result.responseJSON;
                        if (result['status'] !== 200) {
                            layer.msg(result['message']);
                            return;
                        }
                        var courseScoreList = result['data'];
                        for (var i = 0; i < courseScoreList.length; i++) {
                            var courseScore = courseScoreList[i];
                            var list = courseMap[courseScore['courseType']];
                            if (list === undefined) {
                                list = [];
                                courseMap[courseScore['courseType']] = list;
                            }
                            list.push(courseScore)
                        }
                        for(i = 0; i < creditTypeList.length; i++) {
                            var type = creditTypeList[i]['type'];
                            var courseList = courseMap[type];
                            if (courseList.length === 0) {
                                courseList = emptyCourse
                            }
                            table.render({
                                elem: '#' + tableIdMap[type]
                                ,totalRow: true
                                ,cols:[[
                                    {field:'courseName', minWidth:120, title:'课程名', align:'left', totalRowText:"合计"}
                                    ,{field:'credit', minWidth:60, title:'学分', align:'left', totalRow: true}
                                    ,{field:'score', minWidth:90, title:'成绩', totalRowText:"毕业要求"}
                                    ,{field: 'semester', minWidth:135, title:'学期', totalRowText:creditTypeMap[type]['credit']}
                                ]]
                                ,data: courseList
                                ,limit: courseList.length
                            })
                        }

                    }
                })
            }
        })
    });
</script>